<template>
  <div class="top">
    <div class="container">
      <div class="left-nav">
        <div class="left">
          <img v-if="$route.meta.companyHome" src="@/assets/images/home/logo.png" style="margin-right: 10px;object-fit: cover;" alt="" />
          欢迎来到找包装网!
        </div>
        <div v-if="$route.meta.hide" class="right">
          <router-link to="/home" style="display: flex; align-items: center;margin-left: 10px;">
            <img src="~/assets/images/top-back-icon.png" alt="" style="width: 16px; height: 13px; margin-right: 5px;" />
            返回网站首页
          </router-link>
        </div>
        <div class="funcs" v-if="!$store.state.access_token">
          <img class="userHead" src="~/assets/images/user.png" />
          <router-link to="/login-register/login">登录</router-link>
          <span>|</span>
          <router-link to="/login-register/register">注册</router-link>
        </div>
        <div class="funcs" v-else>
          <img class="ava" style="margin-left: 10px;" :src="$store.state.userInfo.avatar" v-if="$store.state.userInfo.avatar" />
          <img class="ava" src="~/assets/images/user.png" v-else />
          {{ $store.state.userInfo.nickname }}
          <div class="loginOut" @click="handleLogout">退出登录</div>
        </div>
      </div>
      <div class="right">
        <a href="http://www.pack-mate.com/merchant/login" target="_blank">登录商家后台</a>
        <span>|</span>
        <router-link to="/advisory">新闻资讯</router-link>
        <span>|</span>
        <router-link to="/help">帮助中心</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import searchSelect from '@/components/m-searchbar/SearchSelect';
import { Input, Select, Option, Button } from 'element-ui';

export default {
  name: 'Top', // 首页顶部导航条
  components: {
    searchSelect,
    Input,
    Select,
    Option,
    Button
  },
  data() {
    return {
      search_type: '',
      keywords: ''
    };
  },
  methods: {
    ...mapMutations(['logout']),
    handleLogout() {
      this.logout();
    }
  }
};
</script>

<style scoped>
.search {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}
.loginOut {
  margin-left: 10px;
  cursor: pointer;
}

.loginOut:hover {
  color: #e38b2e;
}

.top {
  height: 45px;
  line-height: 45px;
  background: #f5f4f9;
}

.top .right a img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 15px;
}

.top .right .profile {
  background: url('../../assets/images/home/52aa.png') no-repeat;
  width: 20px;
  height: 20px;
}

.top .right .profile:hover {
  width: 20px;
  height: 20px;
  background: url('../../assets/images/home/person.png') no-repeat;
}

.top .right .message {
  background: url('../../assets/images/home/1as5d1a32s.png') no-repeat;
  width: 20px;
  height: 20px;
}

.top .right .message:hover {
  width: 20px;
  height: 20px;
  background: url('../../assets/images/home/news.png') no-repeat;
}

.top .right .cart {
  background: url('../../assets/images/home/1daswd1a32.png') no-repeat;
  width: 20px;
  height: 20px;
}

.top .right .cart:hover {
  width: 20px;
  height: 20px;
  background: url('../../assets/images/home/cart.png') no-repeat;
}

.mr10 {
  margin-right: 15px;
  cursor: pointer;
}

.top .right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.top .right span {
  color: #abacae;
  margin: 0 14px;
}

.content {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.userHead {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  margin-left: 10px;
}

.left-nav {
  float: left;
  margin-left: 6px;
  z-index: 1000;
}
.left-nav .left {
  display: flex;
  align-items: center;
}

.left-nav .funcs {
  display: flex;
  height: 45px;
  align-items: center;
}

.ava {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
}

.left-nav span {
  color: #abacae;
  margin: 0 10px;
}
</style>
